<template>
  <div class="container">
    <!-- 从“学科标签” 按钮来到标签管理的时候布局
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>学科管理</el-breadcrumb-item>
      <el-breadcrumb-item>大数据</el-breadcrumb-item>
      <el-breadcrumb-item>目录管理</el-breadcrumb-item>
    </el-breadcrumb>
    <hr/> -->
    <!-- 表头实现搜索功能 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="标签名称" prop="name">
        <el-input v-model="query.tagName"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="query.state" placeholder="请选择">
          <el-option label="已启用" value="0"></el-option>
          <el-option label="已禁用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm">清除</el-button>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
      <!-- 右侧新增标签按钮 -->
      <el-button
        type="success"
        style="float: right; !padding: 3px 3px;margin-top: 22px;
  margin-right: 20px;"
        icon="el-icon-edit"
        size="small"
        @click="addFn"
        >新增标签</el-button
      >
    </el-form>
    <!-- 主体盒子 -->
    <div
      class="midlebox"
      style=" padding-left: 20px;
  padding-right: 20px;"
    >
      <!-- 消息数量数据 -->
      <el-alert :title="`数据一共${total}条`" type="info" show-icon :closable="false" />
      <!-- 整体数据 -->
      <el-table :data="this.list" style="width: 100%">
        <el-table-column type="index" label="序号" width="90"> </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="tagName" label="标签名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template v-slot="scope">
            <span v-if="!scope.row.state">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="change(scope.row)" v-if="scope.row.state == 1">启用</el-button>
            <el-button type="text" @click="change(scope.row)" v-else>禁用</el-button>
            <el-button type="text" :disabled="scope.row.state == 0 ? false : true" @click="edit(scope.row)"
              >修改</el-button
            >
            <el-button type="text" :disabled="scope.row.state == 0 ? false : true" @click="deleteFn(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部页码切换 -->
      <template>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="query2.pagesize"
            background
            :total="total"
            :title="isEdit == false ? '添加目录' : '修改目录'"
            layout=" prev,pager,next,sizes,jumper"
            style="text-align: right;margin-top: 22px"
          >
          </el-pagination>
        </div>
      </template>
      <el-dialog title="新增目录" width="400px" :visible.sync="dialogFormVisible" @close="cancel">
        <el-form ref="myform" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="所属学科" prop="subjectName">
            <el-select v-model="form.subjectID" placeholder="请选择" style="width:235px">
              <el-option v-for="(item, index) in list" :key="index" :label="item.subjectName" :value="item.subjectID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录描述" prop="tagName">
            <el-input v-model="form.tagName" />
          </el-form-item>
        </el-form>
        <!-- 底部 -->
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="cancel">取消</el-button>
          <el-button size="small" type="primary" @click="addEdit">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list, remove, changeState, add, update } from '@/api/hmmm/tags.js'

export default {
  data () {
    return {
      // 当前页
      currentPage1: 1,
      isEdit: false,
      editId: '',
      // 列表数据
      query: {
        page: 1,
        pagesize: 10,
        subjectID: '',
        tagName: '',
        state: ''
      },
      query2: {
        page: 1,
        pagesize: 10
      },
      // 新增数据弹窗必填项
      rules: {
        subjectID: [{ required: true, message: '学科不能为空', trigger: 'blur' }],
        tagName: [{ required: true, message: '目录名称不能为空', trigger: 'blur' }]
      },
      // 列表
      list: [],
      total: 0,
      // simple: [],
      dialogFormVisible: false,
      // 添加表单
      form: {
        subjectID: '',
        tagName: ''
      },
      id: ''
    }
  },
  // 数据渲染
  created () {
    this.tagsAPI()
  },
  methods: {
    roleSubmit () {
      this.showDialog = false
    },
    // 取消权限按钮
    cancleRoles () {
      this.showDialog = false
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.query2.pagesize = val
      if (this.query2.page === 1) {
        this.tagsAPI(this.query2)
      }
      this.tagsAPI()
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.query2.page = val
      this.tagsAPI()
    },
    // 清除的点击事件
    resetForm () {
      this.query.tagName = ''
      this.query.state = ''
    },
    // 搜索的点击事件,进行搜索
    async onSubmit () {
      const { data: res } = await list({ tagName: this.query.tagName, state: this.query.state })
      this.list = res.items
      this.total = res.counts
      // this.tagsAPI()
    },
    // 新增数据按钮
    addFn () {
      this.dialogFormVisible = true
      this.isEdit = false
    },
    // 数据渲染到表格
    async tagsAPI () {
      // 判断是否按照学科查找
      if (this.$route.query.id) {
        const res = await list({ subjectID: this.$route.query.id })
        this.list = res.data.items
        this.total = res.data.counts
        this.simple = res.data.items
        // console.log(this.list)
      } else {
        const res = await list(this.query2)
        this.list = res.data.items
        this.total = res.data.counts
        this.simple = res.data.items
        // console.log(this.list)
      }
    },
    // 删除数据
    async deleteFn (data) {
      await remove(data)
      this.tagsAPI()
    },
    // 新增下的取消按钮
    cancel () {
      this.dialogFormVisible = false
      this.form = {
        subjectID: '',
        tagName: ''
      }
    },
    // 确认按钮,提交到表单
    addEdit () {
      this.$refs.myform.validate(async valid => {
        if (valid) {
          if (this.isEdit) {
            await update({
              id: this.editId,
              ...this.form
            })
            this.$message.success('修改成功')
          } else {
            // 调用新增角色的 API
            await add(this.form)
            this.$message.success('添加成功')
          }
          this.tagsAPI()
          this.dialogFormVisible = false
        }
      })
    },
    // 修改按钮
    edit (dataObj) {
      this.isEdit = true
      this.form.subjectID = dataObj.subjectID
      this.form.tagName = dataObj.tagName
      this.editId = dataObj.id
      // 打开面案
      this.dialogFormVisible = true
    },
    // 点击改变启用和禁用按钮的状态
    async change (row) {
      await changeState({
        id: row.id,
        state: row.state === 0 ? 1 : 0
      })
      if (!this.state) {
        row.state = !row.state
      }
      this.$message.success('操作成功')
    }
  }
}
</script>

<style scoped>
/* 设置外盒子边距,背景颜色 */
.container {
  background: #ffffff;
  margin-top: 12px;
  margin-left: 10px;
  margin-right: 10px;
}
/* 表头 */
.demo-form-inline {
  height: 80px;
}
.el-form-item {
  padding-top: 22px;
  padding-left: 42px;
}
.block {
  height: 60px;
}
</style>
